<template>
	<u-skeleton :loading="isLoading" rows="15">

		<view class="" style="overflow: hidden;" v-if="!isStrart">
			<view class="examing-title">
				{{examInfo.name}}
			</view>


			<view class="content">




				<view style="margin-top: 20rpx;">



<!-- 					<u-cell-group>
						<u-cell>
							<view slot="title">

								<view style="float: left;">
									<text class="u-cell-text">题目数量</text>
								</view>

								<view style="float: right;">
									<text class="u-cell-text" style="color: rgb(150, 151, 153);">
										<u-tag style="float: right;" class="mlw" :text="examInfo.qCount+'道'" size="mini"
											type="primary">
										</u-tag></text>
								</view>

							</view>
						</u-cell>


						<u-cell>
							<view slot="title">

								<view style="float: left;">
									<text class="u-cell-text">总分</text>
								</view>

								<view style="float: right;">
									<text class="u-cell-text" style="color: rgb(150, 151, 153);">
										<u-tag style="float: right;" class="mlw" :text="examInfo.totalScore+'分'"
											size="mini" type="primary">
										</u-tag></text>
								</view>

							</view>
						</u-cell>


						<u-cell>
							<view slot="title">

								<view style="float: left;">
									<text class="u-cell-text">及格分</text>
								</view>

								<view style="float: right;">
									<text class="u-cell-text" style="color: rgb(150, 151, 153);">
										<u-tag style="float: right;" class="mlw" :text="examInfo.passScore+'分'"
											size="mini" type="primary">
										</u-tag></text>
								</view>

							</view>
						</u-cell>

						<u-cell>
							<view slot="title">

								<view style="float: left;">
									<text class="u-cell-text">开始时间</text>
								</view>

								<view style="float: right;">
									<text class="u-cell-text" style="color: rgb(150, 151, 153);">
										<u-tag style="float: right;" class="mlw" :text="examInfo.beginTime" size="mini"
											type="primary">
										</u-tag></text>
								</view>

							</view>
						</u-cell>

						<u-cell>
							<view slot="title">

								<view style="float: left;">
									<text class="u-cell-text">结束时间</text>
								</view>

								<view style="float: right;">
									<text class="u-cell-text" style="color: rgb(150, 151, 153);">
										<u-tag style="float: right;" class="mlw" :text="examInfo.endTime" size="mini"
											type="primary">
										</u-tag></text>
								</view>

							</view>
						</u-cell>


						<u-cell>
							<view slot="title">

								<view style="float: left;">
									<text class="u-cell-text">剩余考试时间</text>
								</view>

								<view style="float: right;">
									<text class="u-cell-text" style="color: rgb(150, 151, 153);">
										<u-count-down :time="countdown" format="HH:mm:ss" autoStart millisecond
											@change="onChange">
											<view class="time">
												<view class="time__custom">
													<text
														class="time__custom__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
												</view>
												<text class="time__doc">:</text>
												<view class="time__custom">
													<text
														class="time__custom__item">{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes }}</text>
												</view>
												<text class="time__doc">:</text>
												<view class="time__custom">
													<text
														class="time__custom__item">{{ timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds}}</text>
												</view>
											</view>
										</u-count-down>






									</text>
								</view>

							</view>
						</u-cell>

					</u-cell-group> -->
					
					
					<view class="">
						<view class="y_cell">
							
							<view class="y_cell_left">
								<view style="float: left;">
									<text class="u-cell-text">题目数量</text>
									
									
								</view>
							</view>
							
							<view class="y_cell_right">
								<view style="float: left;">
									
									<view class="y_tag floatright y_tag_bgPrimary mlw">
								{{examInfo.qCount}}道
									</view>
									
								</view>
								
							</view>
						</view>
						
						<view class="y_cell">
							
							<view class="y_cell_left" style="border-bottom: none !important;">
								<view style="float: left;">
									<text class="u-cell-text">总分</text>
									
									
								</view>
							</view>
							
							
							<view class="y_cell_right">
								<view style="float: left;">
									
									<view class="y_tag floatright y_tag_bgPrimary mlw">
									{{examInfo.totalScore}}分
									</view>
									
								</view>
								
							</view>
							
							
						</view>
						
						
						<view class="y_cell">
							
							<view class="y_cell_left" style="border-bottom: none !important;">
								<view style="float: left;">
									<text class="u-cell-text">及格分</text>
									
									
								</view>
							</view>
							
							
							<view class="y_cell_right">
								<view style="float: left;">
									
									<view class="y_tag floatright y_tag_bgPrimary mlw">
									{{examInfo.passScore}}分
									</view>
									
								</view>
								
							</view>
							
							
						</view>
						
						
						<view class="y_cell">
							
							<view class="y_cell_left" style="border-bottom: none !important;">
								<view style="float: left;">
									<text class="u-cell-text">开始时间</text>
									
									
								</view>
							</view>
							
							
							<view class="y_cell_right">
								<view style="float: left;">
									
									<view class="y_tag floatright y_tag_bgPrimary mlw">
									{{examInfo.beginTime}}
									</view>
									
								</view>
								
							</view>
							
							
						</view>
						
						
						<view class="y_cell">
							
							<view class="y_cell_left" style="border-bottom: none !important;">
								<view style="float: left;">
									<text class="u-cell-text">结束时间</text>
									
									
								</view>
							</view>
							
							
							<view class="y_cell_right">
								<view style="float: left;">
									
									<view class="y_tag floatright y_tag_bgPrimary mlw">
									{{examInfo.endTime}}
									</view>
									
								</view>
								
							</view>
							
							
						</view>
						
						
						
						
						
						
						
						
						
						
						<view class="y_cell" style="display: none;">
							
							<view class="y_cell_left" style="border-bottom: none !important;">
								<view style="float: left;">
									<text class="u-cell-text">剩余考试时间</text>
									
									
								</view>
							</view>
							
							
							<view class="y_cell_right">
								<view style="float: left;">
									
									<view class=" floatright  mlw">
									<text class="u-cell-text" style="color: rgb(150, 151, 153);">
										<u-count-down :time="countdown" format="HH:mm:ss" autoStart millisecond
											@change="onChange">
											<view class="time">
												<view class="time__custom">
													<text
														class="time__custom__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
												</view>
												<text class="time__doc">:</text>
												<view class="time__custom">
													<text
														class="time__custom__item">{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes }}</text>
												</view>
												<text class="time__doc">:</text>
												<view class="time__custom">
													<text
														class="time__custom__item">{{ timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds}}</text>
												</view>
											</view>
										</u-count-down>
									
									
									</text>
									</view>
									
								</view>
								
							</view>
							
							
						</view>
						
						
						
						
						
						<view class="y_cell">
							
							<view class="y_cell_left" style="border-bottom: none !important;">
								<view style="float: left;">
									<text class="u-cell-text">剩余考试时间</text>
									
									
								</view>
							</view>
							
							
							<view class="y_cell_right">
								<view style="float: left;">
									
									<view class="y_tag floatright y_tag_bgPrimary mlw">
									<template>
										<u-count-down style="color: #fff;" :time="countdown" 
										format="HH:mm:ss"  autoStart millisecond
											@change="onChange">
										 <view class="time">
										                 <text>{{timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
										      
										             <text>:</text>
										             
										                 <text>{{  timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes }}</text>
										            
										             <text>:</text>
										            
										                 <text>{{timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds }}</text>
										            
										         </view>
										</u-count-down>
										
										</template>
									</view>
									
								</view>
								
							</view>
							
						</view>
						
						
						
						
						
					</view>
					
					
					
					
					
					
					
					
					
				</view>

				<view style="margin-top: 20rpx;">
					<u-button type="primary" style="width: 96%;" @click="start">
						{{examInfo.isContinue==null||examInfo.isContinue==0?"开始":"继续"}}考试</u-button>
				</view>




			</view>
		</view>


		<view class="" v-else>
			<view class="top">
				<view class="icon iconfont icon-naozhong floatleft">
					<view class="floatright" style="margin-top: 20rpx; ">
						<u-count-down :time="timer" format="HH:mm:ss" autoStart millisecond
											 @change="onChange" ></u-count-down>
					</view>
				</view>

				<view class="floatright qcount">
					<view class="icon iconfont icon-renwu" @click="tankuang">
						<text style="padding-left: 6rpx;">{{testpaper.length}}</text>
					</view>
				</view>

			</view>

			<view style="height: 10rpx; background-color: rgb(249, 249, 249);">
			</view>


			<view class="allContent" :animation="animation" >

				<view class="content">

					<view class="title-type">
						<view class="floatleft" style="margin-left:20rpx">
							<view class="y_tag" style="margin-top: 10rpx;">
								{{index+1}}.单选题
							</view>
						</view>

						<view class="floatright" style="margin-right: 10rpx;">
							<view class="y_tag y_tag_bgWarning" style="margin-top: 10rpx;">
								{{testpaper[index].score}}分
							</view>
						</view>
					</view>


					<view class="title-content" style="width: 96%; padding:10rpx">
						<rich-text :nodes="testpaper[index].content"></rich-text>
					</view>

				</view>

				<view style="width: 100%;" v-for="(item,i) in testpaper[index].options" :key="item.id">
					<view class="options" @click="selected(item)" :class="[item.isSelected?'selectOptions':'']">
						{{item.content}}
					</view>

				</view>
				<u-divider />



				<u-button type="warning" class="prev" @click="prev" :disabled="index==0">上一题</u-button>

				<view class="" style="margin-top: 20rpx;">
					<u-button
					type="primary" v-if="index != testpaper.length - 1" class="next" @click="next">下一题</u-button>
					<u-button type="success" v-if="index == testpaper.length - 1" class="next"
						@click="complete">交卷</u-button>
				</view>
			</view>


			<u-popup :show="show" mode="top" custom-style="height: 30%;" @close="close" >
				<!-- <view class="" slot="title"> -->
				<view style="width: 100%; height: 100%; padding-top: 20rpx;padding-bottom: 20rpx;">
					<view v-for="(item,i) in testpaper" :key="item.id" class="tan" :class="[item.isSelected==true?'selectOptions':'']"
						@click="checkTopic(i)">
						{{i+1}}
					</view>
				</view>
				<!-- </view> -->
			</u-popup>
			
      <!--   <u-modal :show="completeExam" width="350rpx" :title="oktitle" :content='okcontent'></u-modal> -->

		</view>
	</u-skeleton>
</template>

<script>
	import {
		getSingleExam,
		startExam,
		JiaoJuan
	} from '../../../api/exam';
	export default {
		data() {
			return {
				completeExam:false,
				id: "",
				/**
				 * 本次考试的数据详情
				 */
				examInfo: {},
				//结束时间
				endTime: "",
				//离考试结束剩余时间(时间戳形式)
				countdown: "",
				isLoading: true,
				//倒计时时间
				timeData: "",
				isStrart: false,
				ji:false,
				//本次试卷id
				code: "",
				/**
				 * 本次试卷的题目详情
				 */
				testpaper: {},
				/**
				 * 当前第几题
				 */
				index: 0,
				/**
				 * 记录已经回答的题目
				 */
				datika: [],
				timer: -1,
				animation: null, //动画对象
				jiaodu: 0,
				/**
				 * 用来判断题目是否回答完毕 没回答完交卷会弹出
				 */
				show: false
			}
		},
		onShow() {
			//获取本次考试试卷详情
			getSingleExam({
				id: this.id
			}).then(res => {
				if (res.result === 0) {
					let nowTimestamp = new Date().getTime();
					let endTimestamp = new Date(res.data.endTime.replaceAll("-", "/")).getTime();
					this.timeData = new Date(res.data.endTime.replaceAll("-", "/"));
					let countdown = endTimestamp - nowTimestamp;
					this.examInfo = res.data;
					this.endTime = endTimestamp;
					this.countdown = countdown;
					this.isLoading = false;
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
					});
					setTimeout(() => {
						uni.reLaunch({
							url:"/pages/index/index"
						})
					}, 500);
				}


			})
		},
		onLoad(options) {
			this.id = options.id;
		},
		methods: {
			    /**
			   * 交卷按钮触发事件
			   */
			  complete(){
			    const {testpaper,datika,id}=this;
			    if(datika.length!=testpaper.length){
			        wx.showToast({
			          title: '还有题目未作答',
			          icon:"none"
			        })
			        
			          this.show=true;
			    }else{
			     
			      uni.showModal({
			        title: '提示',
			        content: '确认交卷吗?',
					success: res=> {
						

						if (res.confirm) {
							
							JiaoJuan({aid:id,answers:datika}).then((res)=>{
							    if(res.result===0){
							      uni.removeStorageSync(id)
							      uni.showToast({
							        title: '操作成功',
							        icon:"none"
							      })
							      uni.showLoading({
							        title: "请稍后....",
							      });
							     
							     setTimeout(() => {
							       uni.hideLoading();
							       uni.redirectTo({
							        url: '/pages/exam/result/result?id='+id
							      });
							     }, 1500);
							     
							    }else{
							      uni.showToast({
							        title: res.message,
							        icon:'none'
							      })
							    }
							})
							
							
						} else if (res.cancel) {
							uni.showToast({
							  title: "在检查一遍",
							  icon:'none'
							})
						}
					}
			      })
			        
			    }
			    return
			     
			  },
			
			  /**
			   * 弹出框选中哪题跳转到哪题
			   */
			  checkTopic(index){
			      this.index=index;
			    
			    this.close();
			  },
			/**
			 * 点击图标查看答题库
			 */
			tankuang() {
				this.show = true;
			},
			/**
			 * 点击选项选中背景变色 计入答题卡
			 * @param {} event 
			 */
			selected(val) {
				let answer = val;
				const {
					datika,
					index,
					testpaper,
					id
				} = this;
				let temp = datika.find(d => d.qid == testpaper[index].id);
				if (temp == undefined) {
					datika.push({
						qid: testpaper[index].id,
						answers: [answer.id]
					})
				} else {
					datika.map(d => {
						if (d.qid == temp.qid) {
							d.answers = [answer.id];
						}
					})
				}

				testpaper[index].isSelected = true;
				testpaper[index].options.map(d => {
					d.isSelected = false;
					if (d.id == answer.id) {
						d.isSelected = true;
					}
				})


				this.testpaper = testpaper;
				this.datika = datika;


				uni.setStorageSync(id, {
					testpaper: testpaper,
					datika: datika
				});
				// console.log(uni.getStorageSync(id),"OMK");
				//缓存记录
				// app.globalData.myExam={
				//   testpaper:testpaper,
				//   datika:datika
				// }


				if (index < testpaper.length - 1) {
					//设定动画
					let animation = uni.createAnimation({
						duration: 300,
						delay: 0,
						timingFunction: "linear",
					});

					this.animation = animation;


					setTimeout(() => {
						this.changeQuestion(0);
					}, 50);
					setTimeout(() => {

						this.index = index + 1;

					}, 350);
				}


			},


			/**
			 * 上一题
			 */
			prev() {
				let {
					index,
					testpaper
				} = this;

				if (index <= 0) {
					return
				}

				if (index <= testpaper.length - 1) {
					//设定动画
					let animation = uni.createAnimation({
						duration: 400,
						delay: 0,
						timingFunction: "linear",
					});

					this.animation = animation;


					setTimeout(() => {
						this.changeQuestion(0);
					}, 50);
					setTimeout(() => {
						this.index = index - 1;
					}, 350);
				}
			},

			/**
			 * 下一题
			 */
			next() {

				let {
					index,
					testpaper
				} = this;
			
				if (index < testpaper.length - 1) {
					//设定动画
					let animation =  uni.createAnimation({
						duration: 400,
						delay: 0,
						timingFunction: "linear",
					});

					this.animation = animation;


					setTimeout(() => {
						this.changeQuestion(0);
					}, 50);
					setTimeout(() => {
						this.index = index + 1;

					}, 350);
				}

			},
			
			


			//动画旋转
			//旋转
			changeQuestion: function(action) {
				let {
					animation,
					jiaodu
				} = this;
				//顺时针旋转10度
				if (action == 0) {
					jiaodu += 360;
				} else {
					jiaodu -= 360;
				}
				 // animation.rotate3d(jiaodu, jiaodu, jiaodu, jiaodu).step();
				this.animation.scale3d(0.01,1,445).step();
		        this.animation.scale3d(1,1,461).step();

				//输出动画
				this.animation = animation.export();
				this.jiaodu = jiaodu;

			},

			close() {
				this.show = false
			},
   
			//倒计时改变事件
			onChange(e) {
				if(e.days!=0||e.hours!=0||e.minutes!=0||e.seconds!=0||e.milliseconds!=0){
					this.ji=true
				}
				if(this.ji){
					console.log(e);
					if(e.days==0&&e.hours==0&&e.minutes==0&&e.seconds==0&&e.milliseconds==0){
										console.log("进来；了");
										 uni.showLoading({
										 	title:"考试已结束"
										 })
										 
										 setTimeout(()=>{
										 	uni.reLaunch({
										 		url:"/pages/index/index"
										 	})
										 }, 1500);
					}
				}
				
				this.timeData = e;
			},
			/**
			 * 点击开始考试 开始考试
			 */
			start() {
				uni.showLoading({
					title: "请稍后"
				});

				const id = this.id;
				startExam({
					id: id
				}).then((res) => {
					uni.hideLoading();
					if (res.result === 0) {
						let tp = res.data.testpaper;
						tp.map(d => {
							d.isSelected = false;
							d.options.map(e => e.isSelected = false)
						});

						this.testpaper = tp;
						this.code = res.data.code;
						this.timer = res.data.timer;
						this.isStrart = true;



						if (uni.getStorageSync(id) != "") {
							this.testpaper = uni.getStorageSync(id).testpaper;
							this.datika = uni.getStorageSync(id).datika;
						}


						//  if(app.globalData.myExam!=null){
						//   this.setData({
						//     testpaper: app.globalData.myExam.testpaper,
						//     datika:app.globalData.myExam.datika
						//   })
						//   let {testpaper}=this.data
						//   // console.log(testpaper,"JJ");
						//  }


					} else if (res.result === -1) {
						uni.showLoading({
							title: "请稍后....",
						});

						uni.showToast({
							title: '你已经考试完毕啦',
							icon: 'none'
						})
						setTimeout(() => {
							
							uni.hideLoading();
							uni.navigateTo({
								url: '/pages/exam/result/result?id=' + id
							});
						}, 1500);

					}
				})




			},

		}
	}
</script>

<style scoped lang="scss">
	@import url("/static/main.css");
	@import url("/static/iconfont/icons.css");
	
	// .y_cell{
	// 	border-top: 1px solid #eee;
	// 	border-bottom: 1px solid #eee;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-between;
	// 	height: 65rpx;
	// }
	
	.y_cell_left{
		margin-left: 20rpx;
	}
	
	.y_cell_right{
		margin-right: 20rpx;
	}
	
	
	
	
	.top {
		height: 80rpx;
		line-height: 80rpx;
		border: 1px solid #eee;
		background: #fff;
	}

	.qcount {
		margin-right: 20rpx;
		color: rgb(199, 196, 196);
	}


	.title-type {
		height: 60rpx;
		line-height: 60rpx;
		background-color: #fff;
	}


	.title-content {
		background-color: rgb(241, 241, 241);
		min-height: 100rpx;
		width: 98%;
		border-radius: 8rpx;
		margin-left: 0.9%;
		padding: 0 8rpx 8rpx 8rpx;
	}

	.content {
		border: 1px solid #eee;
		border-top: none;
		padding-bottom: 10rpx;
	}


	.options {
		border: 1px solid #eee;
		width: 90%;
		padding: 2.5%;
		margin-top: 20rpx;
		margin-left: 18rpx;
		text-align: center;
		border-radius: 12rpx;
	}

	.selectOptions {
		background-color: rgb(25, 137, 250) !important;
		color: #fff !important;
	}

	.prev,
	.next {
		width: 96%;
		margin-left: 2%;
		margin-top: 20rpx;
	}


	.tan {
		width: 50rpx;
		height: 50rpx;
		margin: 10rpx;
		margin-left: 10rpx;
		line-height: 50rpx;
		text-align: center;
		float: left;
		border: 1px solid #1989fa;
		color: #1989fa;
		border-radius: 10rpx;
	}

	.allContent {
		padding-bottom: 20rpx;
		border-bottom: 1px solid #eee;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, .12), 0 0 12rpx rgba(0, 0, 0, .04);
	}



.u-count-down{
	color: #fff;
}
.time{
	color: #fff;
}
	// .time {
	// 	@include flex;
	// 	align-items: center;

	// 	&__custom {
	// 		margin-top: 4px;
	// 		width: 22px;
	// 		height: 22px;
	// 		background-color: $u-primary;
	// 		border-radius: 4px;
	// 		/* #ifndef APP-NVUE */
	// 		display: flex;
	// 		/* #endif */
	// 		justify-content: center;
	// 		align-items: center;

	// 		&__item {
	// 			color: #fff;
	// 			font-size: 12px;
	// 			text-align: center;
	// 		}
	// 	}

	// 	&__doc {
	// 		color: $u-primary;
	// 		padding: 0px 4px;
	// 	}

	// 	&__item {
	// 		color: #606266;
	// 		font-size: 15px;
	// 		margin-right: 4px;
	// 	}
	// }



	.examing-title {
		margin-top: 20rpx;
		width: 100%;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
	}


	.cell-hover-class {
		background-color: rgb(235, 237, 238);
	}

	/* 或者单是设置透明度 */
	.cell-hover-class {
		opacity: 0.5;
	}
</style>